<template>
  <div>
    <table width=800 style="text-align: center; margin: 0 auto;" border=1>
            <caption>欢迎光临_vue开发的收银系统_水果店</caption>
            <tr>
                <th>苹果 {{price}} ¥ / 斤, 折扣 {{discount*10}}&lt; 折 &gt;</th>
            </tr>
            <tr>
                <td>
                    请输入你要购买的斤数 <input type="number"   placeholder="斤数" v-model.number="Catty">
                </td>
            </tr>
            <tr>
                <td>
                    <button @click="totalFn">结账买单~</button>
                </td>
            </tr>
            <tr>
                <td>
                    结账单:
                    <span>总价: {{ totalCount }} ¥元</span>
                    <span>折后价:{{ disPrice }}  ¥元</span>
                    <span>省了: {{ Savemoney }} ¥元</span>
                </td>
            </tr>
        </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 8, // 单价
      discount: 0.7, // 折扣
      Catty: 0, // 斤数
      totalCount: 0, // 总价
      disPrice:0, //折后价
      Savemoney:0 // 省钱
    }
  },
  methods:{
    totalFn() {
      // 总价格
      this.totalCount = this.Catty * this.price
      // 折后价
      this.disPrice = (this.totalCount * this.discount).toFixed(2)
      //省钱
      this.Savemoney = (this.totalCount - this.disPrice).toFixed(2)
    }
  }
}
</script>

<style>

</style>